<template>
  <div class="app-container" v-loading="pageLoading">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="panel-info">
          <div class="panel-title">仓库列表</div>
          <div class="panel-body">
            <el-button type="primary" class="fr" @click="createItem" v-permission="'stock.add'">创建</el-button>
            <div class="filter-container">
              <el-input style="width: 300px" placeholder="输入查询关键字按回车" clearable prefix-icon="el-icon-search"
                class="filter-item" @keyup.enter.native="research" @clear="research" v-model="query.queryString">
              </el-input>
            </div>
            <z-table :list="list" :tableProps="tableProps" :columns="columnsLeft" @current-change="getStockMats"
              @editItem="editItem" @deleteItem="deleteItem" />
            <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
              @change="getList"></z-pagination>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="panel-info">
          <div class="panel-title">物料列表</div>
          <div class="panel-body">
            <el-button v-show="currentDataId" type="primary" class="fr" @click="createMatConf"
              v-permission="'stock.add'">
              添加存放物料</el-button>
            <div class="filter-container"></div>
            <z-table :list="matlist" :tableProps="tableProps" :columns="columnsRight" @editItem="editMatConf"
              @deleteItem="deleteMatConf" />
            <z-pagination :pagination="pagination" :total="mattotal" :page.sync="matquery.page"
              :limit.sync="matquery.size" @change="getMatList"></z-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
    <z-form-dialog :name="nameLeft" :data="data" :formProps="formProps" :fields="fieldsLeft" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
    <z-form-dialog name="存放物料维护" :data="matData" :formProps="formProps" :fields="fieldsRight" @submit="submitMatConf"
      :submitLoading="submitLoading" :visible.sync="editMatFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'

const emptyData = {}
export default {
  mixins: [commonMixin],
  name: 'stock',
  data: function () {
    return {
      nameLeft: '库位管理',
      api: this.$api.stock,
      pageLoading: false,
      submitLoading: false,
      query: {
        page: 1,
        size: 10,
      },
      list: [],
      total: 0,
      data: {
        ...emptyData,
      },
      editFormVisible: false,
      currentDataId: 0,
      tableProps: {
        border: true,
        highlightCurrentRow: true,
      },
      columnsLeft: [
        { title: '仓库编码', key: 'warehouse_code', width: 100 },
        { title: '所属仓库', key: 'warehouse_name', width: 100 },
        { title: '库位编码', key: 'stock_code', width: 100 },
        { title: '备注', key: 'remarks' },
      ],
      fieldsLeft: [
        {
          title: '所属仓库',
          key: 'warehouse_id',
          name: 'select',
          options: [],
          props: {},
        },
        {
          title: '库位编码',
          key: 'stock_code',
        },
        {
          title: '备注',
          key: 'remarks',
        },
      ],
      columnsRight: [
        { title: '物料PN', key: 'key_part_no', width: 120 },
        { title: '物料名称', key: 'key_part_name', width: 120 },
        { title: '物料规格', key: 'key_part_desc', width: 120 },
        { title: '最大存放数', key: 'max_stock_qty', width: 100 },
        { title: '备注', key: 'remarks' },
      ],
      fieldsRight: [
        {
          title: '物料',
          key: 'material_id',
          name: 'select',
          options: [],
          props: {
            placeholder: '输入料号或名称筛选',
            filterable: true,
            remote: true,
            remoteMethod: this.getMaOptions,
          },
        },
        {
          title: '最大存放数',
          key: 'max_stock_qty',
          name: 'number',
        },
        {
          title: '备注',
          key: 'remarks',
        },
      ],
      editMatFormVisible: false,
      //mat
      matquery: {
        page: 1,
        size: 10,
        stockId: 0,
      },
      matlist: [],
      mattotal: 0,
      matData: {},
    }
  },
  methods: {
    getList() {
      this.pageLoading = true
      this.$request(this.$api.stock + 'getlist', this.query)
        .then((r) => {
          this.pageLoading = false
          this.list = r.list
          this.total = r.total
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
    init() {
      this.$request(this.$api.warehouse + 'getlist', {
        page: 1,
        size: 10,
      })
        .then((r) => {
          let tmp = {}
          let t = this.fieldsLeft.find((i) => i.key == 'warehouse_id')
          tmp.options = []
          r.list.forEach((i) => {
            t.options.push({
              value: i.id.toUpperCase(),
              label: i.warehouse_code + ' ' + i.warehouse_name,
            })
          })
          // t.options.push(tmp)
        })
        .catch(() => {})
    },
    getMatList() {
      this.pageLoading = true
      this.$request(this.api + 'getmatconflist', this.matquery)
        .then((r) => {
          this.pageLoading = false
          this.matlist = r.list
          this.mattotal = r.total
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
    research() {
      this.query.page = 1
      this.total = 0
      this.list = []
      this.getList()
    },
    createItem() {
      this.data = {
        ...emptyData,
      }
      this.editFormVisible = true
    },
    getStockMats: function (row) {
      this.currentDataId = row ? row.id : 0
      this.matquery.stockId = this.currentDataId
      this.getMatList()
    },
    createMatConf() {
      this.matData = {
        stock_id: this.currentDataId,
      }
      this.editMatFormVisible = true
    },
    editMatConf(v) {
      this.pageLoading = true
      this.$request(this.api + 'getmatconfbyid', {
        id: v.id,
      })
        .then((r) => {
          this.pageLoading = false
          this.matData = r
          this.editMatFormVisible = true
          this.singleOption(this.matData.material_id)
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
    deleteMatConf(v) {
      this.$confirm('确定要删除这条记录？', '操作确认').then(() => {
        this.pageLoading = true
        this.$request(this.api + 'deletematconf/' + v.id, {}, 'post')
          .then((r) => {
            this.pageLoading = false
            this.$message({
              message: '操作成功',
              type: 'success',
            })
            this.getMatList()
          })
          .catch(() => {
            this.pageLoading = false
          })
      })
    },
    submitMatConf: function () {
      this.submitLoading = true
      // let url = this.api + (this.data.id ? 'update' : 'add')
      let url = this.api + 'matconfadd'
      this.$request(url, this.matData, 'post')
        .then((r) => {
          this.submitLoading = false
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.editMatFormVisible = false
          this.getMatList()
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
    submit: function () {
      this.submitLoading = true
      // let url = this.api + (this.data.id ? 'update' : 'add')
      let url = this.api + 'add'
      this.$request(url, this.data, 'post')
        .then((r) => {
          this.submitLoading = false
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.editFormVisible = false
          this.getList()
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
    getMaOptions(query) {
      if (query) {
        this.$request(this.$api.mat + 'getmatandsku', {
          queryString: query,
        })
          .then((r) => {
            let tmp = this.fieldsRight.find((i) => i.key == 'material_id')
            tmp.options = []
            r.map((j) => {
              tmp.options.push({
                value: j.id,
                label: j.key_part_no + ' ' + j.key_part_name + ' ' + j.key_part_desc,
              })
            })
          })

          .catch(() => {})
      } else {
        let tmp = this.fieldsRight.find((i) => i.key == 'material_id')
        tmp.options = []
      }
    },
    singleOption(id) {
      if (id) {
        this.$request(this.$api.mat + 'getmatandsku', {
          id,
        })
          .then((r) => {
            let tmp = this.fieldsRight.find((i) => i.key == 'material_id')
            tmp.options = []
            r.map((j) => {
              tmp.options.push({
                value: j.id,
                label: j.key_part_no + ' ' + j.key_part_name + ' ' + j.key_part_desc,
              })
            })
          })
          .catch(() => {})
      } else {
        let tmp = this.fieldsRight.find((i) => i.key == 'material_id')
        tmp.options = []
      }
    },
  },
  created: function () {
    this.getList()
    this.init()
  },
  watch: {
    data: function (val) {},
  },
}
</script>

<style scoped>
</style>
